import React, { Component } from 'react'
import { nanoid } from 'nanoid'
import style from './Header.module.css'

export class Header extends Component {
  handleEnter = (event) => {
    // 判断是否为enter
    if (event.key !== "Enter") return
    // 为空不能添加
    if(!event.target.value.trim()) return
    // 创建todo对象
    const todoObj = { id: nanoid(), name: event.target.value.trim(), done: false }
    // 通过props回调的方式，将数据传给App
    this.props.addItem(todoObj)
    // 清空输入框
    event.target.value = ""
  }
  render() {
    return (
      <div className={style.header}>
        <input onKeyUp={this.handleEnter} className={style.ipt} type="text" placeholder='请输入任务名称，按回车确认' />
      </div>
    )
  }
}

export default Header
